<template>
	<view class="page-wrap page-bg">
		<view class="search-wrap">
			<view class="index-search">
				<image class="search-icon" src="../../static/common/icon_02.png"></image>
				<input class="search-text" v-model="searchKey"  placeholder="请输入关键词进行搜索" :placeholder-class="searchKey?'placeholder':''"></input>
			<!-- 	<input class="search-input"  v-model="searchKey" :auto-focus="true"></input> -->
				<image class="search-icon__close" @click="clear" src="../../static/common/close_02.png"></image>
			</view>
			<view class="btn btn-search" @click="search">搜索</view>
		</view>

		<block v-if='1===2'>
		<view class="search-group">
			<view class="search-group__title">热门搜索</view>
			<view class="search-option">普洱茶</view>
		</view>


		<view class="search-group">
			<view class="search-group__title">历史搜索
				<image class="after" src="../../static/common/icon_05.png" mode=""></image>
			</view>
			<view class="history-options">土特产</view>
		</view>
		</block>
		
		<view v-else>
			<view v-if="items.length<=0" class="desc no-info">暂时没有相关产品~</view>
			<block v-else>
				<view class="shop-column">
					<view @click="setTabType(0)" :class="tabType===0?'shop-column__item shop-column__active':'shop-column__item'" >热销爆品</view>
					<view @click="setTabType(1)" :class="tabType===1?'shop-column__item shop-column__active':'shop-column__item'" >新品甄选</view>
					<view @click="setTabType(2)" :class="tabType===2?'shop-column__item shop-column__active':'shop-column__item'" >
						<!--  --><!-- <image class="shop-column__op" src="../../static/common/icon_05.png" mode=""></image> -->
						<view :class="sort===0?'shop-column__price':'shop-column__price2'">价格</view>
						<!-- <image class="shop-column__op" src="../../static/common/icon_05.png" mode=""></image> -->
					</view>
				</view>
				<shopList :items='items' :text='text'></shopList>
			</block>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	import shopList from '../../components/shopList.vue'
	export default {
		data() {
			return{
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				items: [],
				searchKey: '',
				tabType: 0, // 热销：0，新品：1，价格：2
				sort: 0, // 升序为0，降序为1
				isSearch: false, // flase搜索页，true：搜索列表页
				text:'上拉加载更多~'
			}
		},
		onLoad() {
			this.pageSize = common.pageSize
		},
		methods:{
			link(url) {
				this.$link(url)
			},
			clear() {
				this.searchKey = ''
			},
			setTabType(val) {
				this.pageIndex = 1
				this.items = []
				this.tabType = val
				if(val === 2) {
					// 排序
					this.sort = this.sort === 1 ? 0 : 1
				}
				this.search()
			},
			search() {
				this.items = []
				let {searchKey, tabType, sort, pageIndex, pageSize} = this.$data
				if(!searchKey) {
					this.$showToast('请填写关键字~'); return
				}
				this.isSearch = true
				let items = api.searchReturnPages({searchKey, tabType, sort, pageIndex, pageSize},(res) => {
					 this.totalCount = res.totalCount
					 if(this.pageSize > res.totalCount) { this.text = '已经没有更多了~' }
					 this.items = [...this.items, ...res.items]
				}) 
			},
		},
		
		onReachBottom() {
			if(this.pageIndex * this.pageSize >= this.totalCount) {
				this.text = '已经没有更多了~'
			}else{
				this.pageIndex ++
				this.search()
			}
		},
		components:{
			shopList
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	
	.page-wrap {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.search-wrap {
		.flex-base;
		align-items: flex-start;

		.index-search {
			flex-wrap: 2;
			margin-right: 20rpx;
		}

		.btn-search {
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
		}
	}
	.search-group {
		.content-30;
		padding-bottom: 0;
		.br;
		background-color: @f;
		margin-bottom: 20rpx;
	}
	.search-group__title {
		.fw;
		.f30;
		margin-bottom: 30rpx;
	}
	.search-option {
		background-color: @bg-dark-color;
		height: 45rpx;
		line-height: 45rpx;
		border-radius: 45rpx;
		text-align: center;
		padding: 0 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		display: inline-block;
		.f22;
	}
	.search-group {
		.search-group__title {
			.flex-base;
			.after {
				width: 26rpx;
				height: 26rpx;
				display: block;
			}
		}
	}
	.history-options {
		.f26;
		padding-bottom: 30rpx;
	}
</style>
